<template>
	<!-- 轮播 -->
	<view class="organization-item">
		<view class="organization-area">深圳福田区</view>

		<view class="organization-item__box">
			<view class="flex justify-between">
				<view @tap="$Router.push({ path: '/pages/organization/details', query: { id: 1 } })">
					<view class="text1">青恋医美集团</view>
					<view class="text2">
						青恋医美集团，是一家定位国际化高端医美定制医疗美容机构。
					</view>
					<view class="flex text3">
						<u-icon name="map"></u-icon>
						深圳市福田区滨河大道5022号联合广场B座204
					</view>
				</view>
				<view class="organization-item__map" @tap="openMap">
					<image src="/static/images/map.png" mode="widthFix" class="w100"></image>
				</view>
			</view>
			<view class="organization-item__people"
				@tap="$Router.push({ path: '/pages/organization/details', query: { id: 1 } })">
				<image class="organization-item__image" src="/static/images/people/1.png" mode="widthFix" />
				<image class="organization-item__image" src="/static/images/people/2.png" mode="widthFix" />
				<image class="organization-item__image" src="/static/images/people/3.png" mode="widthFix" />
				<image class="organization-item__image" src="/static/images/people/4.png" mode="widthFix" />
				<image class="organization-item__image" src="/static/images/people/5.png" mode="widthFix" />
			</view>
		</view>
	</view>
</template>

<script>
	import wxsdk from '@/shopro/wechat/sdk'
	export default {
		components: {},
		data() {
			return {
				position: {
					latitude: '22.529598',
					longitude: '114.069696',
					name: '深圳青恋医疗美容门诊部',
					address: '深圳市福田区滨河大道5022号联合广场B座204'
				},
			};
		},
		props: {
			Px: {
				type: [Number, String],
				default: 0
			}
		},
		computed: {
			markers() {
				const {
					longitude,
					latitude
				} = this.position;
				return [{
					id: 0,
					latitude, //纬度
					longitude, //经度
					iconPath: '', //显示的图标
					rotate: 0, // 旋转度数
					width: 15, //宽
					height: 15, //高
					title: '标记位置', //标注点名
					alpha: 0.5, //透明度
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: this.Destination.destination_dicname, //文本
						color: '#000', //文字颜色
						fontSize: 12, //文本大小
						borderRadius: 15, //边框圆角
						bgColor: '#fff', //背景颜色
						display: 'ALWAYS', //常显
					}
				}];
			}
		},


		methods: {
			// 自提打开地图114.076313,22.535248
			openMap() {
				console.log('打开地图');
				let that = this
				uni.showActionSheet({
					itemList: ['高德地图'],
					success: function(res) {
						that.guide(res.tapIndex)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
				// #ifdef MP
				// uni.openLocation({
				// 	latitude: '22.529598',
				// 	longitude: '114.069696',
				// 	success: function() {
				// 		console.log('success');
				// 	},
				// 	fail: (err) => {
				// 		console.log(err);
				// 	}
				// });
				// // #endif
				// // #ifdef H5
				// wxsdk.openLocation({
				// 	latitude: '114.076313',
				// 	longitude: '22.535248'
				// });
				// // #endif
			},
			guide(signMap) {
				uni.showLoading({
					title: '跳转中'
				});
				let {
					position
				} = this;
				if (position.name && position.name != '') {
					//景点位置position.name 景点经纬度lng lat
					var lng = position.longitude;
					var lat = position.latitude;
					if (signMap == 0) {
						// 高德地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								}
							}
						})
					} else if (signMap == 1) {
						// 百度地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									var delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=景点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								} else {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									let delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + lat +
												"," + lng + "&title=" + position.name +
												"&content=景点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								}
							}
						})
					} else {
						// 腾讯地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform === "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用腾讯地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								}
							}
						})
					}
				} else {
					uni.showToast({
						title: '暂不知道该景区位置',
						icon: 'none',
						duration: 2000,
					});
				}
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.organization-item {
		.organization-area {
			padding: 20rpx 32rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		&__box {
			background-color: #ffffff;
			padding: 30rpx 32rpx;
		}

		.text1 {
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.text2 {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 8rpx;
			width: 400rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.text3 {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 8rpx;
		}

		&__map {
			width: 150rpx;
			height: 150rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		&__people {
			margin-top: 22rpx;
		}

		&__image {
			width: 126rpx;
			height: 126rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 14rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>
